<template>
  <ContextMenu
    :content="message"
    :menu-list="ChatTextMenu"
    @select="(event, MenuItem) => MenuItem.click(event, message)"
  >
    <div
      :class="MessageBgColor"
      class="max-w-[400px] overflow-hidden items-center whitespace-normal break-words break-word text-sm p-2.5 cursor-pointer rounded-md"
    >
      <!-- 引用消息 -->
      <template v-if="message.quotationId">
        <ReferMention :quotationId="message.quotationId" :show-close="false" />
      </template>
      <!-- @消息 -->
      <template v-if="message.aitIds">
        <span v-for="u in AitUserList" :key="u.id" class="mx-1"> @{{ u.name }} </span>
        {{ message.content }}
      </template>
      <!-- 普通消息 -->
      <template v-else>
        {{ message.content }}
      </template>
    </div>
  </ContextMenu>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { IUser } from "@/types/user";
import { IMessage } from "@/types/chat";
import { useCache } from "@/store/modules/cache";
import { useUser } from "@/store/modules/user";
import { useChatMenu } from "@/hooks/useMenu.ts";
import ReferMention from "./ReferMention.vue";
import ContextMenu from "@/components/ContextMenu/index.vue";

const cache = useCache();
const user = useUser();
const { ChatTextMenu } = useChatMenu();
const props = defineProps<{
  message: IMessage;
}>();
const MessageBgColor = computed(() => {
  if (user.userId === props.message.sendId) {
    return "bg-ChatMe text-white";
  } else {
    return "bg-ChatOther text-fontPrimary";
  }
});
const AitUserList = computed<IUser[]>(() => {
  const groupId = props.message.groupId!;
  let aitUserList = JSON.parse(props.message.aitIds || "[]") as number[];
  let userList = cache.GroupMemberCache.get(groupId) || [];
  return userList.filter((u) => aitUserList?.includes(u.id)) || [];
});
</script>

<style lang="scss" scoped></style>